<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>系统登录——超市订单管理系统</title>
    <link rel="icon" href="img/logo.png" type="image/x-icon">
    <!-- 引入layui核心样式 -->
    <link rel="stylesheet" href="lib/layui/css/layui.css"/>
    <!-- 引入layui核心JS -->
    <script src="lib/layui/layui.js"></script>
    <style>
        .container {
            width: 100%;
            height: 100vh;
            display: flex;
        }

        .container>.left {
            flex: 6;
            display: flex;
            /* 主轴方向的对齐方式，横着排布，主轴就是横轴 */
            /* 子元素在当前元素中水平居中 */
            justify-content: center;
            background-color: #16baaa;
            min-width: 600px;
        }

        .container>.left>p {
            display: flex;
            /* 主轴为竖轴 */
            flex-direction: column;
            justify-content: center;
        }
        .container>.left>p>span:first-child {
            font-size: 72px;
            font-weight: bold;
        }
        .container>.left>p>span:not(:first-child) {
            font-size: 36px;
            text-align: right;
        }
        .container>.right {
            flex: 4;
            position: relative;
            /* 右边区域至少要能完整容纳登录表单 */
            min-width: 350px;
        }

        .login-container {
            width: 320px;
            position: absolute;
            top: 50%; /* 元素的上边界距离父元素上边界50%的父元素高度 */
            left: 50%; /* 元素的左边界距离父元素左边界50%的父元素宽度 */
            transform: translate(-50%, -50%); /* 往上走自己高度的一半，往左走自己宽度的一半 */
        }
        .login-other .layui-icon {
            position: relative;
            display: inline-block;
            margin: 0 2px; top: 2px;
            font-size: 26px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 纯色背景 -->
    <div class="left">
        <p>
            <span>超市订单管理系统</span>
            <span>学号：20224128001</span>
            <span>姓名：kunkun</span>
        </p>
    </div>
    <!-- 登录表单 -->
    <div class="right">
        <form class="layui-form">
            <div class="login-container">
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input autocomplete="off" class="layui-input"
                               lay-affix="clear" lay-verify="required|userCodeRule" lay-reqtext="请填写用户名"
                               name="userCode" placeholder="用户名" type="text" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input autocomplete="off" class="layui-input"
                               lay-affix="eye" lay-reqtext="请填写密码" lay-verify="required|userPasswordRule"
                               name="userPassword" placeholder="密   码" type="password" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-vercode"></i>
                                </div>
                                <input autocomplete="off" class="layui-input"
                                       lay-affix="clear" lay-reqtext="请填写验证码" lay-verify="required"
                                       name="captcha" placeholder="验证码" type="text" value="">
                            </div>
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                <img onclick="this.src='login?type=captcha&t='+ new Date().getTime();" src="login?type=captcha" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <input lay-skin="primary" name="remember" title="记住密码" type="checkbox">
                    <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
                </div>
                <div class="layui-form-item">
                    <button type="button" class="layui-btn layui-btn-fluid" lay-filter="login" lay-submit>登录</button>
                </div>
                <div class="layui-form-item login-other">
                    <label>社交账号登录</label>
                    <span style="padding: 0 21px 0 6px;">
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
                    </span>
                    或 <a href="#reg">注册帐号</a>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    // 获取layui的内置模块
    let form = layui.form
    let layer = layui.layer
    let $ = layui.$

    // 初始化
    layui.use(function() {
        // 提交的时候触发这个规则
        form.verify({
            userCodeRule: function (value, element) {
                if (value.length < 3) {
                    return '用户名太短啦'
                }
            },
            userPasswordRule: function (value, element) {
                if (value.length < 3) {
                    return '密码太短啦'
                }
            }
        })

        // 定义提交事件
        form.on('submit(login)', function(data) {
            // 获取表单字段值，就是平时发送ajax请求中的data
            let field = data.field
            field.type = 'login'
            $.ajax({
                url: 'login',
                type: 'POST',
                data: field,
                success: function (result) {
                    if (result.code === 200 || result.code === 201) {
                        location.href = 'page/home.html'
                    } else {
                        layer.msg(result.msg, {icon: 2})
                    }
                },
                error: function (error) {
                    layer.msg('请求失败', {icon: 2})
                }
            })
            // 阻止默认form跳转
            return false
        })
    });
</script>
</html>